<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="../../static/css-tuangou/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../static/css-tuangou/le-details.css"/>
    <link rel="stylesheet" type="text/css" href="../../static/css-tuangou/buttons.css"/>
    <link rel="stylesheet" type="text/css" href="../../static/css-tuangou/alert.css"/>
    <link rel="stylesheet" type="text/css" href="../../static/layui/css/layui.css"/>
    <link rel="icon" href="../../static/img/le-icon.png"/>
    <script src="../../static/js-tuangou/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../static/js-tuangou/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../static/layui/layui.js" type="application/javascript" charset="utf-8"></script>
    <title>商品详情</title>
</head>
<body>

<!-- ad -->
<div class="le-ad le-bg hidden-xs">
    <div class="container">
        <marquee behavior="scroll">
            <h4>乐购平台 盛大开业 欢迎来购 专享7折优惠 惊喜不断。</h4>
        </marquee>
    </div>
</div>
<!-- nav导航条 -->
<div id="head"></div>

<div class="le-top-ad hidden-xs hidden-sm">
    <button class="close">&times;</button>
</div>
<!-- 商品详情 -->
<div class="container le-goods-details ">  <!-- hidden -->

    <div class="col-md-4">
        <div class="thumbnail">
            <img id="le-goods-url"
                 src="">
        </div>
    </div>

    <div class="col-md-8">
        <h4 class="le-goods-title" id="le-goods-title">
            <span id="le-goods-gid" class="hidden"></span>
        </h4>
        <p class="le-text le-goods-tilte-small">【会员专属】0元入会领专属优惠券,1元试用正装！
            【先储值后购物】至高享充值3000元送400元！</p>
        <p class="le-text le-goods-tilte-small">【好评抽奖】评价抽奖享更多惊喜好礼！点击 <a href="">查看&gt;</a></p>

        <div class="jumbotron">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-10">
                        <ul class="list-inline">
                            <li>乐 购 价</li>
                            <li><span class="le-price">￥<span id="le-goods-price"></span></span></li>
                            <span class="layui-badge layui-bg-orange" id="tuangou-price">团购价</span>
                            <li><span class="le-price">￥<span id="le-goods-price-group"></span></span></li>
                        </ul>
                        <ul class="list-inline le-icon">
                            <li>促 销</li>
                            <li><span class="le-icon-red">满减</span></li>
                            <li><span class="le-icon-red">换购</span></li>
                            <li><span class="le-icon-yellow">PLUS限购</span></li>
                            <li><span class="le-icon-primary">满额返券</span></li>
                        </ul>
                    </div>
                    <div class="col-md-2 hidden-xs hidden-sm hidden-md">
                        <div class="le-sales">
                            累计销量<br><a href="">100万+</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 配送 -->
        <dl class="dl-horizontal hidden-xs hidden-sm">
            <dt>配送至</dt>
            <dd>
                <ul class="list-inline">
                    <li><a href="" style="border: none; color: #000;">四川成都 <b>有货</b></a></li>
                </ul>
            </dd>

            <dt>支持</dt>
            <dd>
                <ul class="list-inline">
                    <li><a href="">配送港澳台</a></li>
                    <li><a href="">99元免运费</a></li>
                    <li><a href="">破损包退换</a></li>
                    <li><a href="">7天无理由</a></li>
                    <li><a href="">正品保障</a></li>
                </ul>
            </dd>

            <dt>乐购发货</dt>
            <dd>
                <ul class="list-inline">
                    <li style="color: #646fb0;">现在购买即可享受售后服务保障 18:00 前下单 预计后天送达。</li>
                </ul>
            </dd>
        </dl>
        <br>
        <!-- 按钮 -->
        <div class="le-choose">
            <!-- <button class="button button-glow button-highlight" id="le-favorite" type="button">收藏</button> -->
            <button class="button button-glow button-caution" id="le-add-cart">加入购物车</button>
            <button class="button button-glow button-highlight" id="le-add-group">立即拼团</button>
        </div>
    </div>

</div>
<!--评论内容-->
<div class="container le-goods-details ">
    <div class="sub-title">
        <div style="font-size:20px">评论</div>
    </div>
    <div>
        <form class="layui-form">
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">内容：</label>
                <div class="layui-input-block">
                    <textarea class="layui-textarea" id="content"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="submitComment" style="background-color: #f11b1b;">立即提交</button>
                </div>
            </div>
        </form>
    </div>
    <div class="sub-title">
        <div style="font-size:20px">评论列表</div>
    </div>
    <div>
        <ul class="comment-ul">
        </ul>
    </div>
</div>
<!--底部样式-->
<div class="container-fluid le-describe hidden-xs hidden-sm">
    <h4>消费者须知</h4>
    <p class="le-text">价格说明：</p>
    <p><b>乐购价：</b>京东价为商品的销售价，是您最终决定是否购买商品的依据。</p>
    <p><b>划线价：</b>商品展示的划横线价格为参考价，并非原价，该价格可能是品牌专柜标价、商品吊牌价或由品牌供应商提供的正品零售价（如厂商指导价、建议零售价等）或其他真实有依据的价格；由于地区、时间的差异性和市场行情波动，品牌专柜标价、商品吊牌价等可能会与您购物时展示的不一致，该价格仅供您参考。
    </p>
    <p><b>折扣：</b>如无特殊说明，折扣指销售商在原价、或划线价（如品牌专柜标价、商品吊牌价、厂商指导价、厂商建议零售价）等某一价格基础上计算出的优惠比例或优惠金额；如有疑问，您可在购买前联系销售商进行咨询。
    </p>
    <p><b>异常问题：</b>商品促销信息以商品详情页“促销”栏中的信息为准；商品的具体售价以订单结算页价格为准；如您发现活动商品售价或促销信息有异常，建议购买前先联系销售商咨询。
    </p>

    <!--    <p th:text="${session.user.name} ? ${session.user.name} :'游客'"></p>-->
</div>

<hr>

<!-- footter -->
<div id="foot"></div>

</body>

<script type="text/javascript">

    //广告条关闭按钮
    $(document).ready(function () {
        //加载导航条、页脚
        $("#head").load("head.html");
        $("#foot").load("foot.html");
        //处理商品
        let url = location.href;
        let gid = new URL(url).searchParams.get('gid');
        if (gid == null || gid == '') {
            location.href = "le-index.html";
        } else {
            $.ajax({
                type: 'GET',
                url: `/main/goods/search/${gid}`,
                success: function (json) {
                    if (json.code == 0) {
                        //渲染数据
                        $('.le-goods-details').removeClass('hidden');
                        $('#le-goods-url').attr('src', json.data.url);
                        $('#le-goods-title').html(json.data.title);
                        $('#le-goods-price').html(json.data.price);
                        $('#le-goods-price-group').html(Math.floor((json.data.price) * 0.8));
                        $('#le-goods-gid').html(json.data.gid);
                    } else {
                        $('<div>').appendTo('body').addClass('alert alert-danger').html(json.msg).show().delay(1500).fadeOut();
                    }
                }
            });
            // 加载评论
            loadComment();
        }
    });

    // 评论点击事件
    $('#submitComment').click(function () {
        let content = $('#content').val();
        if (content == null || content == '') {
            alert('请输入评论内容')
            return false;
        }
        let data = {
            godId: new URL(location.href).searchParams.get('gid'),
            content: content
        }
        $.ajax({
            type: 'POST',
            url: '/tbComment/save',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            data: JSON.stringify(data),
            success: function (res) {
                if (res === -1) {
                    alert('用户未登录，请先登录');
                    return false;
                }
                if (res > 0) {
                    $('#content').val('')
                    loadComment();
                }
            },
            error: function (error) {
                console.error(error)
            }
        });
    })

    function loadComment() {
        $.ajax({
            type: 'GET',
            url: '/tbComment/queryAll',
            dataType: 'json',
            data: {
                godId: new URL(location.href).searchParams.get('gid')
            },
            success: function (res) {
                let html = ''
                // 获取当前用户的用户名
                var currentUserName =$("#le-login").html()
                console.log('currentUserName',currentUserName)
                if (res && res.length > 0) {
                    res.forEach(item => {

                        let delHtml = ' <div class="delete-comment">\n' +
                            '                      <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" onclick="deleteComment('+item.id+')">\n' +
                            '                        删除评论\n' +
                            '                      </button>\n' +
                            '                    </div>';
                        if(item.userName != currentUserName){
                            delHtml = ''
                        }

                        html += ' <li class="comment-item">\n' +
                            '                <div class="comment-wrapper">\n' +
                            '                    <div class="comment-header">\n' +
                            '                        <div>' + item.userName + '</div>\n' +
                            '' + delHtml + '' +
                            '                    </div>\n' +
                            '                    <div class="comment-content">\n' +
                            '                        <p>' + item.content + '</p>\n' +
                            '                        <span class="comment-time">' + item.createTime + '</span>\n' +
                            '                    </div>\n' +
                            '                </div>\n' +
                            '            </li>';
                    })
                }
                $('.comment-ul').html(html);
            },
            error: function (error) {
                console.error(error)
            }
        });
    }

    /**
     * 删除评论
     */
    function deleteComment(id) {
        layui.use(['layer'], function () {
            var layer = layui.layer;
            layer.confirm('确认是否删除?', {icon: 3, title: '提示'}, function (index) {
                $.ajax({
                    type: 'GET',
                    url: '/tbComment/deleteById',
                    dataType: 'json',
                    data: {
                        id: id
                    },
                    success: function (res) {
                        if (res && res === true) {
                            layer.msg("删除成功", {icon: 1, time: 1500}, () => {
                                // 重新刷新表格
                                loadComment();
                            })
                        } else {
                            // 删除失败
                            layer.msg("删除失败", {icon: 5, time: 1500})
                        }
                    },
                    error: function (error) {
                        console.error(error)
                    }
                });
            });
        });
    }

    //购物车点击事件
    $("#le-add-cart").click(function () {
        $.ajax({
            type: 'POST',
            url: '/main/goods/cart/',
            data: {
                gid: new URL(location.href).searchParams.get('gid'),
                cnt:1
            },
            success: function (json) {
                if (json.code == 200) {
                    $('<div>').appendTo('body').addClass('alert alert-warning').html('加入购物车失败').show().delay(1500).fadeOut();
                } else {
                    $('<div>').appendTo('body').addClass('alert alert-success').html('加入购物车成功').show().delay(1500).fadeOut();

                }
            },
            error: function (json) {
                //未登入
                $('<div>').appendTo('body').addClass('alert  alert-danger').html('请先登录').show().delay(1500).fadeOut();
            }
        });
    });

</script>
</html>
